<template>
  <a-layout>
    <a-layout-header class="header">
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="light"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="/home">
          <router-link to="/home">Home</router-link></a-menu-item
        >
        <a-menu-item key="/about">
          <router-link to="/about">About</router-link></a-menu-item
        >
      </a-menu>
    </a-layout-header>
    <a-layout class="container">
      <a-layout-sider
        class="sider"
        collapsible="true"
        theme="light"
      ></a-layout-sider>
      <a-layout-content class="content">
        <h1>{{ $translate("greetings.hello") }}</h1>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, inject } from "vue";
const i18n = inject("i18n");
console.log(i18n.greetings.hello);
const path = window.location.pathname || "/home";
const selectedKeys = ref([path]);
</script>

<style scoped>
.header {
  background-color: #fff;
}

.container {
  height: calc(100vh - 64px);
}

.sider {
  background-color: #fff;
  height: 100%;
}

.content {
  height: 100%;
  padding: 16px;
  overflow: auto;
}
</style>
